<template @reset-index="prizeIndex = 1">
	<view class="box pr pb40">
		<image src="/static/img/index/largeTurntableList.png" class="w-max pa" style="z-index: 1;" mode="widthFix">
		</image>
		<!-- 顶部占位盒子 -->
		<view class="pr" style="z-index: 2;">
			<view class="topbox"></view>
			<view class="navbox x-bc row-between h88r mr20 ml20 ">
				<view class="w200r tl" @tap="navback()">
					<image src="/static/img/index/backW.png" class="w28 h32"></image>
				</view>
				<view class="flex1 tc">
					<text>抽奖</text>
				</view>
				<view class="w200r tr" @tap="$jump('/pages/home/luckDraw/WinList/WinList')">
					<text>中奖记录</text>
				</view>
			</view>
			<!-- 头部标题 -->
			<view class="headertit ml64 mr64 h114 mt80">
				<image src="/static/img/index/zhaunpanTit.png" class="" mode="widthFix"></image>
			</view>
			<!-- 头部标题 -->

			<!-- 抽奖次数 -->
			<view class="luckNum mt40 mb40">
				您还有 <text>{{luck_draw_num}}</text> 次抽奖机会
			</view>
			<!-- /抽奖次数 -->

			<!-- 大转盘抽奖 -->
			<view class="flex row-center">
				<LuckyWheel ref="luckyWheel" width="644rpx" height="644rpx" :blocks="blocks" :prizes="prizes"
					:buttons="buttons" :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
			</view>
			<!-- //大转盘抽奖 -->

			<!-- 活动说明 -->
			<view class="activebox mr48 ml48 pt34 mt200">
				<!-- 标题 -->
				<view class="boxtit text-center mb32">
					<!-- <image src="/static/img/index/left.png" class="w80 h40"></image> -->
					<text>活动说明</text>
					<!-- <image src="../../../static/img/index/right.png" ></image> -->
				</view>
				<!-- 标题 -->
				<view class="activebox-info pl32 pr32">
					<view class="" v-html='config.luck_draw_editor'></view>
				</view>
			</view>
		</view>
		<!-- //活动说明 -->
	</view>
</template>

<script>
	import LuckyWheel from '@/node_modules/uni-luck-draw/lucky-wheel' // 大转盘
	export default {
		name: 'zhuanpan',
		components: {
			LuckyWheel
		},
		onLoad() {
			this.getUserInformation()
			this.getTurntableList()
		},
		data() {
			return {
				config: uni.getStorageSync('config'),
				blocks: [{
						padding: '10px',
						background: '#FDDB91'
					},
					{
						padding: '10px',
						background: '#C0232B'
					},
					{
						padding: '5px',
						background: '#FED4AA'
					},
					{
						padding: '2px',
						background: '#FF7D26'
					}
				],
				prizes: [],
				buttons: [],
				defaultStyle: {
					fontColor: '#EC0216',
					fontSize: '14px'
				},
				//节流阀
				isloading: false,
				luck_draw_num:''
			}
		},
		onNavigationBarButtonTap() {
		},
		methods: {
			navback() {
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
			//获取抽奖次数
			getUserInformation() {
				this.$api.GetUserInformation().then(res=>{
					this.luck_draw_num=res.data.luck_draw_num
				})
			},
			//获取奖品列表
			async getTurntableList() {
				const res = await this.$api.largeTurntableList()
				console.log('000', res)
				this.prizes = await res.data.map((item, index) => {
					let obj = {
						title: item.title,
						background: index % 2 == 0 ? '#FCCE83' : '#FEE3C6',
						fonts: [{
							text: item.title,
							top: '18%',
							fontSize: '15'
						}]
					}
					return obj
				})
			},
			// 点击抽奖按钮触发回调
			async startCallBack() {
				//如果抽奖次数大于0才让点击按钮
				if (this.luck_draw_num > 0) {
					if (this.isloading) return
					this.luck_draw_num--
					// 先开始旋转
					this.$refs.luckyWheel.play()
					this.isloading = true
					const res = await this.$api.largeTurntable()
					// console.log('333', res)
					// 缓慢停止游戏
					this.$refs.luckyWheel.stop(res.data.id - 1)
					setTimeout(()=>{
						this.$msg(res.msg)
					},5000)
				} else {
					return this.$msg('没有抽奖次数')
				}
			},
			// 抽奖结束触发回调
			endCallBack(prize) {
				// 奖品详情
				this.isloading = false
				console.log(prize)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url('~@/static/img/index/largeTurntableList.png') no-repeat;
		background-size: 100% 100%;
	}
	.topbox {
		height: var(--status-bar-height)
	}

	.navbox {
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.headertit {
		image {
			width: 100%;
			height: 100%;
		}
	}

	.luckNum {
		margin: 0 auto;
		width: 360rpx;
		height: 48rpx;
		background: #F2004C;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;

		text {
			padding: 0 20rpx;
			color: #FFF600;
		}
	}

	.activebox {
		background-color: #FFE4B7;
		border: 0px solid #FFFFFF;
		border-radius: 6rpx;

		text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #EC0216;
		}

		.activebox-info {
			font-size: 26rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #EC0216;
		}
	}
</style>
